<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in myswipelist" :key="item.id">
        <img :src="item.img" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="3" square icon-size="60px">
      <van-grid-item
        v-for="item in Grid"
        :icon="item.src"
        :text="item.title"
        :key="item.id"
        :to="item.to"
      />
    </van-grid>
  </div>
</template>
<script>

export default {
  data: () => {
    return {
      myswipelist: [],
      Grid: []
    }
  },
  created() {
    this.getswipelist()
    this.getGrid()
  },
  methods: {
    async getswipelist() {
      const res = await this.$http.getswipelist()
      this.myswipelist = res.data.message
    },
    async getGrid() {
      const res = await this.$http.getGrid()
      this.Grid = res.data.message
    }
  }
}
</script>
<style lang="scss" scoped>
.my-swipe {
  height: 200px;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
